<template>
	<view class="delivery-container">
		<!-- 配送员信息卡片 -->
		<view class="info-card">
			<view class="avatar-container">
				<image class="avatar" :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.getDefaultImage().head" mode="aspectFill"></image>
			</view>
			<view class="info-detail">
				<view class="name-section">
					<text class="name">{{ memberInfo.nickname }}</text>
					<!-- <text class="badge">{{ deliveryMan.level }}</text> -->
				</view>
				<!-- <text class="id">工号: {{ deliveryMan.id }}</text> -->
				<text class="phone">电话: {{ memberInfo.mobile }}</text>
			</view>
			<view class="stat-container">
				<view class="stat-item">
					<text class="stat-number">{{ orderCountData.orderCount }}</text>
					<text class="stat-label">今日订单</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ orderCountData.orderCompleteCount }}</text>
					<text class="stat-label">已完成</text>
				</view>
				<!-- <view class="stat-item">
					<text class="stat-number">{{ deliveryMan.rating }}</text>
					<text class="stat-label">评分</text>
				</view> -->
			</view>
		</view>
		<!-- 订单分类标签 -->
		<view class="tab-container">
			<view class="tab-wrapper">
				<view class="tab-item" :class="{ 'active': currentTab === 'pending' }" @click="switchTab('pending')">
					<text class="tab-text">配送中</text>
					<view class="tab-badge" v-if="pendingCount > 0">{{ pendingCount }}</view>
				</view>
				<view class="tab-item" :class="{ 'active': currentTab === 'completed' }"
					@click="switchTab('completed')">
					<text class="tab-text">已完成</text>
				</view>
				<view class="tab-item" :class="{ 'active': currentTab === 'afterSale' }"
					@click="switchTab('afterSale')">
					<text class="tab-text">售后</text>
					<view class="tab-badge" v-if="afterSaleCount > 0">{{ afterSaleCount }}</view>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<block v-if="currentTab === 'pending'">
				<view class="order-item" v-for="order in pendingOrders" :key="order.order_id"
					@click="viewOrderDetail(order.order_id)">
					<view class="order-header">
						<text class="order-number">订单号: {{ order.order_no }}</text>
						<text class="order-status pending">配送中</text>
					</view>
					<view class="order-body">
						<text class="order-address">{{ order.full_address }}</text>
						<view class="order-info">
							<text class="order-contact">{{ order.name }} {{ order.mobile }}</text>
							<text class="order-time">{{ order.create_time }}</text>
						</view>
					</view>
					<view class="order-footer">
						<text class="order-goods">{{ order.order_goods.length }}件商品</text>
						<button class="deliver-btn" @click.stop="startDelivery(order.order_id)">确认已送达</button>
					</view>
				</view>
				
			
				
				<view class="pagination" v-if="pendingOrders.length > 0">
					<button class="page-btn" :disabled="pendingOrdersPage === 1" @click="prevCompletedPage">上一页</button>
					<text class="page-info">{{ pendingOrdersPage }}/{{ totalPendingPages }}</text>
					<button class="page-btn" :disabled="pendingOrdersPage === totalPendingPages"
						@click="nextPendingPage">下一页</button>
				</view>
				
				<view class="empty-tip" v-if="pendingOrders.length === 0">
					<text class="empty-text">暂无待配送订单</text>
				</view>
			</block>

			<block v-else-if="currentTab === 'completed'">
				<view class="order-item" v-for="order in completedOrders" :key="order.order_id"
					@click="viewOrderDetail(order.order_id)">
					<view class="order-header">
						<text class="order-number">订单号: {{ order.order_no }}</text>
						<text class="order-status completed">已配送</text>
					</view>
					<view class="order-body">
						<text class="order-address">{{ order.full_address }}</text>
						<view class="order-info">
							<text class="order-contact">{{ order.name }} {{ order.mobile }}</text>
							<text class="order-time">{{ order.create_time }}</text>
						</view>
					</view>
					<view class="order-footer">
						<text class="order-goods">{{ order.order_goods.length }}件商品</text>
						<!-- <text class="order-rating" v-if="order.rating > 0">评分: {{ order.rating }}星</text>
						<text class="order-rating" v-else>未评分</text> -->
					</view>
				</view>
				
				<view class="pagination" v-if="completedOrders.length > 0">
					<button class="page-btn" :disabled="completedOrdersPage === 1" @click="prevCompletedPage">上一页</button>
					<text class="page-info">{{ completedOrdersPage }}/{{ totalCompletedPages }}</text>
					<button class="page-btn" :disabled="completedOrdersPage === totalCompletedPages"
						@click="nextCompletedPage">下一页</button>
				</view>
				
				<view class="empty-tip" v-if="completedOrders.length === 0">
					<text class="empty-text">暂无已配送订单</text>
				</view>
			</block>

			<block v-else-if="currentTab === 'afterSale'">
				<view class="order-item" v-for="order in afterSaleOrders" :key="order.order_id"
					@click="viewAfterOrderDetail(order.order_goods_id)">
					<view class="order-header">
						<text class="order-number">订单号: {{ order.order_no }}</text>
						<!-- <text class="order-status after-sale">{{ order.statusText }}</text> -->
					</view>
					<view class="order-body">
						<text class="order-address">{{ order.orderInfo.full_address }}</text>
						<view class="order-info">
							<text class="order-contact">{{ order.orderInfo.name }} {{ order.orderInfo.mobile }}</text>
							<text class="order-time">{{ order.orderInfo.create_time }}</text>
						</view>
						<text class="order-reason">售后原因: {{ order.refund_reason }}</text>
					</view>
					<view class="order-footer">
						<text class="order-goods"></text>
						<button class="handle-btn" @click.stop="handleAfterSale(order.order_goods_id)">已取件</button>
					</view>
				</view>
				<view class="pagination" v-if="afterSaleOrders.length > 0">
					<button class="page-btn" :disabled="afterSaleOrdersPage === 1" @click="prevAfterSalePage">上一页</button>
					<text class="page-info">{{ afterSaleOrdersPage }}/{{ totalAfterSalePages }}</text>
					<button class="page-btn" :disabled="afterSaleOrdersPage === totalAfterSalePages"
						@click="nextAfterSalePage">下一页</button>
				</view>
				<view class="empty-tip" v-if="afterSaleOrders.length === 0">
					<text class="empty-text">暂无售后订单</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/pages_tool/components/uni-nav-bar/uni-nav-bar.vue';
	import info from '../member/public/js/info.js';
	
	export default {
		components: {
			uniNavBar
		},
		mixins: [info],
		data() {
			return {
				orderCountData:{
					orderCount:0,
					orderCompleteCount:0,
				},
				currentTab: 'pending',
				
				pendingOrders: [],
				pendingOrdersPage:1,
				totalPendingPages:1,
				
				completedOrders: [],
				completedOrdersPage:1,
				totalCompletedPages:1,
				
				afterSaleOrders: [],
				afterSaleOrdersPage:1,
				totalAfterSalePages:1,
			};
		},
		computed: {
			pendingCount() {
				return this.pendingOrders.length;
			},
			afterSaleCount() {
				return this.afterSaleOrders.length;
			}
		},
		onLoad() {
			this.orderCount();
			//配送列表
			this.getpendingOrders();
			
		},
		methods: {
			
			//获取今日统计
			prevPendingPage(){
				if (this.pendingOrdersPage > 1) {
					this.pendingOrdersPage--;
					this.getpendingOrders();
				}
			},
			nextPendingPage(){
				if (this.pendingOrdersPage < this.totalPendingPages) {
					this.pendingOrdersPage++;
					this.getpendingOrders();
				}
			},
			prevCompletedPage(){
				if (this.completedOrdersPage > 1) {
					this.completedOrdersPage--;
					this.getcompletedOrders();
				}
			},
			nextCompletedPage(){
				if (this.completedOrdersPage < this.totalCompletedPages) {
					this.completedOrdersPage++;
					console.log(this.completedOrdersPage);
					this.getcompletedOrders();
				}
			},
			
			orderCount(){
				this.$api.sendRequest({
					url: '/api/delivery/orderCount',
					data: {},
					success: res => {
						this.orderCountData = res.data;
					},
				})
			},
			//待配送
			getpendingOrders(){
				this.$api.sendRequest({
					url: '/api/delivery/orderList',
					data: {
						order_status:3,
						page: this.pendingOrdersPage,
					},
					success: res => {
						this.pendingOrders = res.data.list;
						this.totalPendingPages = res.data.page_count
					},
				})
			},
			//已完成
			getcompletedOrders(){
				this.$api.sendRequest({
					url: '/api/delivery/orderList',
					data: {
						order_status:4,
						page: this.completedOrdersPage,
					},
					success: res => {
						this.completedOrders = res.data.list;
						this.totalCompletedPages = res.data.page_count
					},
				})
			},
			//获取售后待取件列表
			getafterSaleOrders(){
				this.$api.sendRequest({
					url: '/api/delivery/refundWaitTakeDelivery',
					data: {
						page: this.afterSaleOrdersPage,
					},
					success: res => {
						this.afterSaleOrders = res.data.list;
						this.totalAfterSalePages = res.data.page_count
					},
				})
			},
			prevAfterSalePage(){
				if (this.afterSaleOrdersPage > 1) {
					this.afterSaleOrdersPage--;
					this.getafterSaleOrders();
				}
			},
			nextAfterSalePage(){
				if (this.afterSaleOrdersPage < this.totalAfterSalePages) {
					this.afterSaleOrdersPage++;
					console.log(this.afterSaleOrdersPage);
					this.getafterSaleOrders();
				}
			},
			// 切换标签
			switchTab(tab) {
				uni.requestSubscribeMessage({
				  tmplIds: ['4i3Lbuk4F_WezjPvvJgFK-76QGxupghZqebQtbb5SbA','BEM0aJf3GdAkY28RfIgbfLSLUigZzB5SuKG-J5k5H7k','Y_QJWUhJRiT2orhZCjuUgbtQ8rq0K6zecekSJR35CjY'],
				  success (res) {
					console.log(res);
				  },
				  fail(e){
					  console.log(e);
				  }
				})
				this.currentTab = tab;
				console.log(tab);
				if(tab=='pending'){
					this.getpendingOrders()
				}else if(tab=='completed'){
					this.getcompletedOrders()
				}else if(tab=='afterSale'){
					this.getafterSaleOrders()
				}
			},
			// 查看订单详情
			viewOrderDetail(orderId) {
				uni.requestSubscribeMessage({
				  tmplIds: ['4i3Lbuk4F_WezjPvvJgFK-76QGxupghZqebQtbb5SbA','BEM0aJf3GdAkY28RfIgbfLSLUigZzB5SuKG-J5k5H7k','Y_QJWUhJRiT2orhZCjuUgbtQ8rq0K6zecekSJR35CjY'],
				  success (res) {
					console.log(res);
				  },
				  fail(e){
					  console.log(e);
				  }
				})
				uni.navigateTo({
					url: '/pages_tool/delivery/detail?order_id=' + orderId
				});
			},
			viewAfterOrderDetail(orderGoodsId){
				uni.requestSubscribeMessage({
				  tmplIds: ['4i3Lbuk4F_WezjPvvJgFK-76QGxupghZqebQtbb5SbA','BEM0aJf3GdAkY28RfIgbfLSLUigZzB5SuKG-J5k5H7k','Y_QJWUhJRiT2orhZCjuUgbtQ8rq0K6zecekSJR35CjY'],
				  success (res) {
					console.log(res);
				  },
				  fail(e){
					  console.log(e);
				  }
				})
				uni.navigateTo({
					url: '/pages_tool/delivery/aftersale?order_goods_id=' + orderGoodsId
				});
			},
			// 开始配送
			startDelivery(orderId) {
				uni.requestSubscribeMessage({
				  tmplIds: ['4i3Lbuk4F_WezjPvvJgFK-76QGxupghZqebQtbb5SbA','BEM0aJf3GdAkY28RfIgbfLSLUigZzB5SuKG-J5k5H7k','Y_QJWUhJRiT2orhZCjuUgbtQ8rq0K6zecekSJR35CjY'],
				  success (res) {
					console.log(res);
				  },
				  fail(e){
					  console.log(e);
				  }
				})
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定已经送达？',
					success: function (res) {
						if (res.confirm) {
							that.$api.sendRequest({
								url: '/api/delivery/confirmDelivery',
								data: {
									order_id:orderId,
								},
								success: res => {
									that.getpendingOrders()
								},
							})
						}
					}
				});
				
				// // 这里可以添加开始配送的逻辑
			},
			// 处理售后
			handleAfterSale(orderGoodsId) {
				uni.requestSubscribeMessage({
				  tmplIds: ['4i3Lbuk4F_WezjPvvJgFK-76QGxupghZqebQtbb5SbA','BEM0aJf3GdAkY28RfIgbfLSLUigZzB5SuKG-J5k5H7k','Y_QJWUhJRiT2orhZCjuUgbtQ8rq0K6zecekSJR35CjY'],
				  success (res) {
					console.log(res);
				  },
				  fail(e){
					  console.log(e);
				  }
				})
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定已经取到商品？',
					success: function (res) {
						if (res.confirm) {
							that.$api.sendRequest({
								url: '/api/delivery/confirmTakeGoods',
								data: {
									order_goods_id:orderGoodsId,
								},
								success: res => {
									that.getafterSaleOrders()
								},
							})
						}
					}
				});
			}
		}
	};
</script>

<style scoped>
	/* 基础样式 */
	.delivery-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 信息卡片样式 */
	.info-card {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.avatar-container {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto 20rpx;
		border: 4rpx solid #f0f0f0;
	}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.info-detail {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.name-section {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.badge {
		background-color: #ff9500;
		color: #fff;
		font-size: 24rpx;
		padding: 4rpx 10rpx;
		border-radius: 15rpx;
	}

	.id,
	.phone {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 6rpx;
		display: block;
	}

	.stat-container {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		padding-top: 20rpx;
	}

	.stat-item {
		text-align: center;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #007aff;
		display: block;
	}

	.stat-label {
		font-size: 26rpx;
		color: #666;
	}

	/* 标签样式 */
	.tab-container {
		background-color: #fff;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.tab-wrapper {
		display: flex;
		justify-content: space-around;
		height: 80rpx;
		align-items: center;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		position: relative;
		padding: 20rpx 0;
	}

	.tab-item.active {
		color: #007aff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 25%;
		width: 50%;
		height: 6rpx;
		background-color: #007aff;
		border-radius: 3rpx;
	}

	.tab-text {
		font-size: 30rpx;
	}

	.tab-badge {
		position: absolute;
		top: 10rpx;
		right: 25%;
		background-color: #ff3b30;
		color: #fff;
		font-size: 20rpx;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 50%;
		text-align: center;
	}

	/* 订单列表样式 */
	.order-list {
		padding: 0 20rpx 20rpx;
	}

	.order-item {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.order-number {
		font-size: 28rpx;
		color: #333;
	}

	.order-status {
		font-size: 24rpx;
		padding: 4rpx 10rpx;
		border-radius: 15rpx;
	}

	.order-status.pending {
		background-color: #fff3cd;
		color: #856404;
	}

	.order-status.completed {
		background-color: #d4edda;
		color: #155724;
	}

	.order-status.after-sale {
		background-color: #f8d7da;
		color: #721c24;
	}

	.order-body {
		margin-bottom: 15rpx;
	}

	.order-address {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
		line-height: 1.4;
	}

	.order-info {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #666;
	}

	.order-reason {
		font-size: 26rpx;
		color: #666;
		margin-top: 10rpx;
		display: block;
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 15rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.order-goods {
		font-size: 26rpx;
		color: #666;
	}

	.order-rating {
		font-size: 26rpx;
		color: #ff9500;
	}

	.deliver-btn,
	.handle-btn {
		background-color: #007aff;
		color: #fff;
		font-size: 26rpx;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
	}

	/* 空状态样式 */
	.empty-tip {
		text-align: center;
		padding: 60rpx 0;
	}

	.empty-img {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
	/* 分页样式 */
	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx 0;
	}
	
	.page-btn {
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		text-align: center;
		font-size: 30rpx;
	}
	
	.page-info {
		margin: 0 20rpx;
		font-size: 28rpx;
		color: #666;
	}
</style>